<template>
  <aside class="right-aside-page">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="组件样式">
        <component-style></component-style>
      </a-tab-pane>
      <a-tab-pane key="2" tab="高级设置">Content of Tab Pane 2</a-tab-pane>
    </a-tabs>
  </aside>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import componentStyle from './component-style.vue'

export default defineComponent({
  name: 'AppRightAside',
  components: {
    componentStyle,
  },
  setup() {
    const activeKey = ref('1')

    return {
      activeKey,
    }
  },
})
</script>

<style scoped lang="less">
.right-aside-page {
  width: 400px;
  height: 100%;
  background-color: #ffffff;
  box-shadow: -4px 0 5px 0 rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}
</style>

<style>
.right-aside-page .ant-tabs {
  height: 100%;
}
.right-aside-page .ant-tabs .ant-tabs-bar {
  height: 45px;
  box-sizing: border-box;
}
.right-aside-page .ant-tabs .ant-tabs-content {
  height: calc(100% - 65px);
  overflow-x: hidden;
  overflow-y: auto;
}
</style>